<template>
	<view class="my-bonus">
		<view class="top">
			<view class="bonus-title">分红比例</view>
			<view class="bonus-value">2%</view>
		</view>

		<view class="">
			<view class="">
				<view class="">
					<view class="">2020年01</view>
					<view class=""></view>
				</view>
				<view class=""></view>
			</view>
			<view class="">
				<view class="">
					<view class="">总交易额：828728.88</view>
					<view class="">预计分红：5656.88</view>
				</view>
				<view class="">
					<view class="">查看消费券</view>
					<view class=""></view>
				</view>
			</view>
		</view>
		<view class="table">
			<view class="thead">
				<view class="th">日期</view>
				<view class="th">交易金额(元)</view>
				<view class="th">预计分红(元)</view>
			</view>
			<view class="tbody">
				<view class="tr">
					<view class="td">20220101</view>
					<view class="td">10000.88</view>
					<view class="td">100.98</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	@import './style.scss';

	.my-bonus {}

	.top {
		@include flex(flex-start);
		padding: 0 30rpx;
		width: 750rpx;
		height: 134rpx;
		background: #FF4544;

		.bonus-title {
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 33rpx;
		}

		.bonus-value {
			margin-left: 8rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 50rpx;
		}
	}



	.table {
		margin-top: 30rpx;
		margin-left: 30rpx;
		width: 690rpx;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 16rpx;

		.thead,
		.tr {
			@include flex;
			padding: 24rpx 0;
		}

		.th,
		.td {
			margin-left: 20rpx;
			width: 220rpx;
			text-align: center;

			&:nth-child(1) {
				margin-left: 0;
				width: 156rpx;
			}
		}

		.thead {
			border-bottom: 1rpx solid #EBEBEB;

			.th {}
		}

		.tbody {
			.tr {
				border-bottom: 1rpx solid #EBEBEB;
				&:last-child {
					border-bottom: 0;
				}
			}

			.td {}
		}

	}
</style>
